<template>
  <div class="channel-edit">
    <van-cell :border='false'>
      <div slot="title">我的频道</div>
      <van-button
        type="danger"
        plain
        round
        size='mini'
        class="editerBtn"
        @click="isEdit = !isEdit"
      >{{isEdit ? '完成' :'编辑'}}</van-button>
    </van-cell>

    <!-- 宫格 -->
    <van-grid
      class="my-grid"
      :gutter="10"
    >
      <van-grid-item
        class='channel-item'
        v-for="(channel,index) in mychannels"
        :key="index"
        @click="onMyChannelClick(channel, index)"
      >
        <span
          slot="text"
          class="text"
          :class="{active: active === index}"
        >
          {{channel.name}}
        </span>
        <!-- 通过插槽自定义图标 -->
        <van-icon
          v-show="isEdit && !fiexChannels.includes(channel.id)"
          slot="icon"
          name="clear"
        ></van-icon>
      </van-grid-item>
    </van-grid>
    <!-- /宫格 -->

    <van-cell :border='false'>
      <div slot="title">频道推荐</div>
    </van-cell>

    <!-- 宫格 -->
    <van-grid
      class="recommend-grid"
      :gutter="10"
    >
      <van-grid-item
        class='channel-item'
        v-for="channel in recommendChannels"
        :key="channel.id"
        :text="channel.name"
        icon="plus"
        @click="onAddChannel(channel)"
      />
    </van-grid>
    <!-- /宫格 -->
  </div>
</template>

<script>
import { getAllChannels, addUserChannels, deleteUserChannel } from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/store'

export default {
  data () {
    return {
      allChannels: [],
      isEdit: false,
      fiexChannels: [0] // 固定索引不允许被删除
    }
  },
  props: {
    mychannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  created () {
    this.loadAllChannels()
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      return this.allChannels.filter(channel => {
        return !this.mychannels.find(myChannel => {
          return myChannel.id === channel.id
        })
      })
    }
    // recommendChannels () {
    //   // 数据的过滤
    //   return this.allchannels.filter(channelItem => {
    //     // 什么样的数据满足条件
    //     // myChannel内部找不到的数据
    //     const flag = this.mychannels.some(item => {
    //       item.id = channelItem.id
    //       return !flag
    //     })
    //   })
    // },
  },
  methods: {
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        console.log(data)
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('获取推荐频道失败')
      }
    },
    async onAddChannel (channels) {
      this.mychannels.push(channels)

      // 数据持久化
      if (this.user) {
        try {
          // 已登录存到线上
          await addUserChannels({
            id: channels.id,
            seq: this.mychannels.length
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('存储失败')
        }
      } else {
        // 未登录
        setItem('TOUTIAO_CHANNELS', this.mychannels)
      }
    },
    onMyChannelClick (channel, index) {
      // 如果是固定频道就不删除
      if (this.fiexChannels.includes(channel.id)) {
        return
      }
      if (this.isEdit) {
        // 删除操作
        if (index <= this.active) {
          this.$emit('updadeChannel', this.active - 1, index, true)
        }
        this.mychannels.splice(index, 1)

        // 删除数据持久化
        this.deleteChannel(channel)
      } else {
        // 执行操作
        this.$emit('updadeChannel', index, false)
      }
    },

    // 删除数据持久化
    async deleteChannel (channel) {
      try {
        if (this.user) {
          // 已登陆
          await deleteUserChannel(channel.id)
          this.$toast('删除成功')
        } else {
          // 未登录，将数据存储到本地
          setItem('TOUTIAO_CHANNELS', this.mychannels)
        }
      } catch (err) {
        this.$toast('删除失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding-top: 85px;
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      white-space: nowrap;
      background-color: #f5f5f6;
      .van-grid-item__text,
      .text {
        color: #222;
        font-size: 18px;
      }
      .active {
        color: #f00;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }
  .editerBtn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .recommend-grid {
    .van-grid-item__content {
      flex-direction: row;
      color: #222;
      .van-icon {
        font-size: 23px;
      }

      .van-grid-item__text {
        font-size: 28px;
        margin-top: 0;
      }
    }
  }
  /deep/ .van-icon-clear {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 36px;
    color: #ccc;
  }
}
</style>
